<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/> <!--让IE使用最新的浏览器渲染-->
		<meta content="telephone=no" name="format-detection"/> <!--禁止将页面中的一连串数字识别为电话号码、并设置为手机可以拨打的一个连接-->
		<meta content="yes" name="apple-mobile-web-app-capable"/> <!--删除默认的苹果工具栏和菜单栏-->
		<meta content="black" name="apple-mobile-web-app-status-bar-style"/> <!--控制状态栏显示样式-->
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> 
		<!--width：视口的宽度，width=device-width：宽度是设备的宽度-->
		<!--initial-scale：初始化缩放，- initial-scale=1.0：不缩放-->
		<!--user-scalable：是否允许用户自行缩放，取值0或1，yes或no-->
		<!--minimum-scale：最小缩放-->
		<!--maximum-scale：最大缩放-->
		<title>啦啦</title>
		<link rel="shortcut icon" href="./img/logo.ico"/><!--图标-->
		<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
		<style>
			@media screen and (max-width:321px){
			    html{font-size:15px}
			}
			
			@media screen and (min-width:321px) and (max-width:400px){
			    html{font-size:16px}
			}
			
			@media screen and (min-width:400px){
			    html{font-size:18px}
			}
			*{
				padding: 0;
				margin: 0;
			}
			div{
				position: relative;
				width: 100%;
				height: 10rem;
				background-color: red;
			}
			.div2{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 30px;
				background-color: #fff;
				/*transition: all 500ms linear 500ms;*/
			}
			-webkit-overflow-scrolling:touch;
			overflow-scrolling:touch;
		</style>
		<script>
	        document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
	        console.log(document.documentElement.clientWidth)
	        var deviceWidth = document.documentElement.clientWidth;
			if(deviceWidth > 640) deviceWidth = 640;
			document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
		
		window.onload=function(){
				$('.div').on('touchmove',function(e){
//					e.stopPropagation(); 
					startX = e.originalEvent.changedTouches[0].pageX, //X轴
    				startY = e.originalEvent.changedTouches[0].pageY; //Y轴
    				$('.div2').css({'top':startY+'px'})
    				
    				console.log(startX);
					console.log(startY);	
				});
//				$('.div').on('touchend',function(e){
//					moveEndX = e.originalEvent.changedTouches[0].pageX,
//  				moveEndY = e.originalEvent.changedTouches[0].pageY,
//  				console.log('-----'+moveEndX);
//					console.log('-----'+moveEndY);
//					X = moveEndX - startX,
//  				Y = moveEndY - startY;
//  				console.log('==='+X)
//  				
//  				if ( Math.abs(X) > Math.abs(Y) && X > 0 ) {
//			            console.log("left 2 right");
//			        }
//			        else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) {
//			            console.log("right 2 left");
//			        }
//			        else if ( Math.abs(Y) > Math.abs(X) && Y > 0) {
//			            console.log("top 2 bottom");//从上往下
//
//			            $('.div2').css({'top':Y+'px'})
//			        }
//			        else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) {
//			            console.log("bottom 2 top");//从下往上
//			        }
//			        else{
//			            console.log("just touch");
//			        }
//			    				
//							})
						}
			
			
    	</script>
	</head>
	<body>
		<div class="div">
			<div class="div2"></div>
			<!--<img src="./img/xiaoxin.jpg"/>-->
		</div>
	</body>
</html>
